<template>
	<div class="wrapper sheZhi bfff box">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
			<div class="disFlex">
				<div>
					<el-upload
						class="avatar-uploader center"
						action=""
						:show-file-list="false"
						:before-upload="beforeAvatarUpload"
						:auto-upload="false"
						:on-change="change"
						ref="upload"
						:limit="1"
					>
						<div class="center colum">
							<div class="avatar posr">
								<div class="box-img" v-if="ruleForm.avatar">
									<img :src="ruleForm.avatar" class="avatar" alt="" />
								</div>
								<div class="box-img" v-else>
									<img src="@/assets/image/index/user.jpg" class="bor50 box-img" alt="" />
								</div>
								<img src="@/assets/image/geRen/xiang.png" class="xiang-icon posa" alt="" />
							</div>

							<div class="f18 c333 fbold mt10 mb20">上传个人头像</div>
							<div class="center">
								<img src="@/assets/image/geRen/alert.png" class="alert-icon" alt="" />
								<div class="f16 c94">支持 gif、jpg、jpeg、png 图片</div>
							</div>
						</div>
					</el-upload>
					<VCropper
						ref="cropper"
						@success="handleAvatarSuccess"
						:round="true"
						:centerBox="false"
						:title="'头像'"
					></VCropper>
				</div>
				<div>
					<div class="title f18 c333" style="font-weight: 700">基本信息</div>
					<el-form-item label="姓名" prop="name">
						<el-input class="name" v-model="ruleForm.realName" disabled />
					</el-form-item>
					<!-- <el-form-item label="昵称" prop="nickname">
						<el-input class="name" v-model="ruleForm.nickname" placeholder="请填写昵称" />
					</el-form-item> -->
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="ruleForm.gender" disabled>
							<el-radio label="m">男</el-radio>
							<el-radio label="f">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="联系方式" prop="phone">
						<el-input class="name" v-model="ruleForm.phone" disabled />
					</el-form-item>
					<el-form-item label="个人签名" prop="remark">
						<el-input
							rows="4"
							placeholder="这个人很懒什么也没留下"
							maxlength="100"
							show-word-limit
							class="remark"
							v-model="ruleForm.remark"
							type="textarea"
						/>
					</el-form-item>
					<el-form-item prop="remark">
						<div class="box-button">
							<el-button class="save-btn" type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
						</div>
					</el-form-item>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { ElMessage } from "element-plus"
import VCropper from "../../components/cropper/index.vue"
const route = useRoute()
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = ref({})

const rules = reactive({})

const submitForm = async formEl => {
	if (!formEl) return
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			try {
				await postAxios("/system/sysUser/personEdit", ruleForm.value)
				ElMessage.success("修改成功")
				router.go(0)
				created()
			} catch (error) {
				ElMessage.error(error)
			}
		} else {
			console.log("error submit!", fields)
		}
	})
}
async function created() {
	ruleForm.value = await getAxios("/system/sysUser/personInfo")
	localStorage.setItem("userInfo", JSON.stringify(ruleForm.value))
}
created()
//上传限制
const beforeAvatarUpload = rawFile => {
	if (
		rawFile.type !== "image/jpeg" &&
		rawFile.type !== "image/png" &&
		rawFile.type !== "image/jpg" &&
		rawFile.type !== "image/gif"
	) {
		ElMessage.error("请上传png/jpeg/gif/jpg格式文件")
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("图片大小不能超过2MB!")
		return false
	}
	return true
}

const upload = ref("")
const cropper = ref("")
// 图片裁剪
function change(file) {
	cropper.value.handleChangeUpload(file)
	upload.value.clearFiles()
}

const upfile = async params => {
	const file = params.file
	const formData = new FormData()
	formData.append("upfile", file)
	const { url } = await postAxios("/system/oss/upload", formData)
	ruleForm.value.avatar = url
}

//上传成功
const handleAvatarSuccess = res => {
	ruleForm.value.avatar = res.url
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.title {
	margin-bottom: 30px;
	padding-left: 88px;
	@include maxWidth(1400) {
		padding-left: 70px;
	}
	@include maxWidth(1024) {
		padding-left: 20px;
	}
	@include maxWidth(768) {
		padding: 40px 0;
		margin-bottom: 0;
	}
}
.box {
	display: flex;
	justify-content: center;
	@include maxWidth(768) {
		display: block;
	}
	.box-button {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}
.sheZhi {
	padding: 100px 50px;
	height: 100%;
	overflow-y: scroll;
	.save-btn {
		margin-left: 100px;
		margin-top: 40px;
	}

	.remark {
		width: 650px;
		border-radius: 3px;
		// margin-left: 90px;
		@include maxWidth(1400) {
			width: 350px;
		}
		@include maxWidth(768) {
			margin-left: 0;
		}
	}

	.ename {
		width: 250px;
	}

	.pname {
		width: 205px;
		margin-right: 30px;
	}

	.name {
		width: 550px;
		@include maxWidth(1400) {
			width: 300px;
		}
	}

	:deep(.el-form-item__label) {
		width: 170px;
		@include maxWidth(1400) {
			width: 150px;
		}
		@include maxWidth(1024) {
			width: 100px;
		}

		@include maxWidth(768) {
			width: 15vw;
		}
	}

	.avatar-uploader {
		// padding: 45px 0 96px;
	}
	.box-img {
		border-radius: 50%;
	}
	.alert-icon {
		width: 15px;
		margin-right: 10px;
	}

	.xiang-icon {
		width: 40px;
		right: 9px;
		bottom: 10px;
	}

	.avatar {
		width: 140px;
		height: 140px;
		object-fit: cover;
		border-radius: 50%;
	}
}
:deep(.el-upload) {
	border: 0;
}
.disFlex {
	display: flex;
	justify-content: center;
	align-content: center;
	@include maxWidth(768) {
		display: block;
	}
}
</style>
